<template>
    <div>
        <div style="margin-left: 5px;margin-top: 5px">
            <el-input v-model="search" style="width: 240px" placeholder="请输入关键词"/>
            <el-button type="primary" @click="list">搜索</el-button>
            <el-button type="info" @click="addClick">增加</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="id" width="200"/>
            <el-table-column prop="name" label="name" width="200"/>
            <el-table-column prop="maker" label="maker" width="200"/>
            <el-table-column prop="price" label="price" width="200"/>
            <el-table-column prop="sales" label="sales" width="200"/>
            <el-table-column prop="stock" label="stock" width="200"/>
            <el-table-column fixed="right" label="Operations" min-width="120">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleClick(scope.row.id)">
                        编辑
                    </el-button>
                    <!--<el-button type="danger" size="small">删除</el-button>-->
                    <el-popconfirm
                            class="box-item"
                            title="是否确认删除该家居？"
                            placement="left-start"
                            @confirm="del(scope.row.id)"
                    >
                        <template #reference>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[1, 3, 5, 7]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!--对话框-->
        <el-dialog
                v-model="dialogVisible"
                :title="dialogTitle"
                width="500"
        >
            <template #footer>
                <div class="dialog-footer">
                    <el-form :model="form" :rules="rules" ref="form" label-width="auto" style="max-width: 600px">
                        <el-form-item label="家居名" prop="name">
                            <el-input style="width:50%" v-model="form.name"/>{{errorMes.name}}
                        </el-form-item>
                        <el-form-item label="生产商" prop="maker">
                            <el-input style="width:50%" v-model="form.maker"/>{{errorMes.maker}}
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input style="width:50%" v-model="form.price"/>{{errorMes.price}}
                        </el-form-item>
                        <el-form-item label="销量" prop="sales">
                            <el-input style="width:50%" v-model="form.sales"/>{{errorMes.sales}}
                        </el-form-item>
                        <el-form-item label="库存" prop="stock">
                            <el-input style="width:50%" v-model="form.stock"/>{{errorMes.stock}}
                        </el-form-item>
                    </el-form>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
    name: 'HomeView',
    components: {},
    data() {            // 数据池
        return {
            errorMes:{      // 用于存放后端验证的错误信息

            },
            rules: {
                name: [
                    {required: true, message: '请输入家居名', trigger: 'blur'},
                ],
                maker: [
                    {required: true, message: '请输入生产商', trigger: 'blur'},
                ],
                price: [
                    {required: true, message: '请输入价格', trigger: 'blur'},
                    {pattern: /^([1-9]\d*|0)(\.\d+)?$/, message: '价格不能为负数', trigger: 'blur'},
                ],
                sales: [
                    {required: true, message: '请输入销量', trigger: 'blur'},
                    {pattern: /^([1-9]\d*|0)$/, message: '请输入正整数', trigger: 'blur'},
                ],
                stock: [
                    {required: true, message: '请输入库存量', trigger: 'blur'},
                    {pattern: /^([1-9]\d*|0)$/, message: '请输入正整数', trigger: 'blur'},
                ],
            },
            currentPage: '1',        // 当前页，默认第一页
            pageSize: '5',           // 每页显示的记录数，默认为5条
            total: 10,               // 总页数，动态更新
            form: {      // 表单数据

            },
            search: "",  // 搜索输入框的内容
            dialogVisible: false,    // 对话框默认是关闭的
            dialogTitle: "增加家居",     // 对话框的标题默认为增加家居
            tableData: [     // 存放表格数据用于展示

            ]
        }
    },
    methods: {              // 方法池
        handleSizeChange(pageSize) {     // 改变每页显示的记录时调用此函数
            this.pageSize = pageSize;
            this.list();
        },
        handleCurrentChange(pageNo) {      // 页码发生变化时调用此函数
            this.currentPage = pageNo;
            this.list();
        },
        del(id) {      // 删除家居
            request.delete("/api/delete/" + id).then(res => {
                if (res.data.code === "200") {    // 删除成功
                    ElMessage({
                        message: '删除家居成功',
                        type: 'success',
                    })
                    this.list();        // 更新家居信息
                } else {     // 删除失败
                    ElMessage({
                        message: '更新家居失败',
                        type: 'warning',
                    })
                    this.list();        // 更新家居信息
                }
            })
        },
        list() {     // 显示家居列表
            request.get("/api/listByPageCondition", {
                params: {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    search: this.search
                }
            }).then(res => {
                console.log(res);
                this.tableData = res.data.data.records;
                this.total = res.data.data.total;
            })
        },
        addClick() {     // 用于处理增加响应
            this.dialogTitle = "增加家居";
            this.form = {};     // 清空输入表单
            this.errorMes = {}; // 清空后端提示信息
            this.dialogVisible = true;  // 显示表单
            if (this.$refs['form']) {               // 清空表单错误提示信息
                this.$refs['form'].resetFields();
            }
        },
        handleClick(id) {  // 用于处理修改响应
            //回显该行数据
            request.get("/api/getFurnById/" + id).then(res => {
                this.form = res.data.data;
            })
            this.dialogTitle = "修改家居";
            this.dialogVisible = true;      // 显示表单
            if (this.$refs['form']) {               // 清空表单前端验证错误提示信息
                this.$refs['form'].resetFields();
            }
            this.errorMes = {}; // 清空后端提示信息
        },
        save() {     // 用于增加/修改家居
            if (this.form.id) {       // 如果表单中id不等于空，则为更新操作
                this.$refs['form'].validate(valid => {
                    if (valid) {          // 前端验证通过
                        request.put("/api/update", this.form).then(res => {
                            if (res.data.code === "200") { //更新成功
                                ElMessage({
                                    message: '更新家居成功',
                                    type: 'success',
                                })
                                this.form = {};     // 清空表单数据
                                this.list();    // 刷新列表数据
                                this.dialogVisible = false; // 关闭表单
                            } else {
                                ElMessage({
                                    message: '更新家居失败',
                                    type: 'warning',
                                })
                                this.errorMes = res.data.data;    // 后端验证失败提示信息
                                this.form = {};     // 清空表单数据
                            }
                        })
                    } else {         // 验证失败
                        ElMessage({
                            message: '验证不通过',
                            type: 'warning',
                        })
                        return false;   // 不提交表单
                    }
                })
            } else {     // 否则为新增操作
                this.$refs['form'].validate(valid => {  // 判断前端表单验证是否通过
                    // valid = true;       // 用于测试后端验证是否可以正确回显错误信息
                    if (valid) {      // 验证通过
                        //发送ajax请求（异步请求）
                        request.post("/api/save", this.form).then(res => {
                            if (res.data.code === "200") { //增加成功
                                ElMessage({
                                    message: '增加家居成功',
                                    type: 'success',
                                })
                                this.form = {};     // 清空表单数据
                                this.list();    // 刷新列表数据
                                this.dialogVisible = false; // 关闭表单
                            } else {         // 增加失败
                                ElMessage({
                                    message: '增加家居失败',
                                    type: 'warning',
                                })
                                this.errorMes = res.data.data;    // 后端验证失败提示信息
                                this.form = {};     // 清空表单数据
                            }
                        })
                    } else {     // 验证不通过
                        ElMessage({
                            message: '验证不通过',
                            type: 'warning',
                        })
                        return false;   // 不提交表单
                    }
                })
            }
        },
    },
    created() {         // vue的生命周期函数，该阶段数据已经初始化完毕，但是还没有渲染，最适合发送ajax请求
        this.list();
    }
}
</script>
